<template>
  <el-card class="card-body">
    <el-row :gutter="20">
      <el-form label-width="80px" :model="form">
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select
                v-model="form.status"
                placeholder="请选择状态"
                clearable
                class="select-width"
            >
              <el-option label="已回复" value="0"></el-option>
              <el-option label="未回复" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align: right">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="名称" width="220"></el-table-column>
        <el-table-column prop="tel" label="电话"></el-table-column>
        <el-table-column prop="mail" label="邮箱"></el-table-column>
        <el-table-column prop="ip" label="ip地址"></el-table-column>
        <el-table-column prop="createDate" label="时间"></el-table-column>
        <el-table-column prop="createDate" label="状态" width="120">
          <template slot-scope="scope" >
           {{ scope.row.replyFlag ? '已回复' : '未回复' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleCheck(scope.row.id,scope.row.replyFlag)"
              >查看
            </el-button>
            <el-button v-if="!scope.row.replyFlag" type="text" @click="handleReply(scope.row.id,0)"
              >回复
            </el-button>
            <el-button v-else type="text" @click="handleReply(scope.row.id,1)"
            >编辑回复
            </el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :count="Number(count)"
        :current="1"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <Detail ref="detail" @getTableData="getTableData"/>
      <Reply ref="reply" @getTableData="getTableData" />
    </el-row>
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import {
  deleteMailboxApi,
  approveReject,
  getMailboxListApi,
} from "@/api/modules/approve.api";
import { mapMutations } from "vuex";
import Detail from "./Detail";
import Reply from "./Reply.vue";

export default {
  components: {
    Pagination,
    Detail,
    Reply,
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
        replyFlag: ''
      },
      form: {
        status: ''
      }
    };
  },
  mounted() {
    this.getTableData(this.page);
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getTableData({ pageNum = 1, pageSize = 10,replyFlag='' }) {
      const res = await getMailboxListApi({ pageNum, pageSize,replyFlag });
      this.tableData = res.records;
      this.count = res.total;
    },
    async handleDelete(id) {
      await deleteMailboxApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.getTableData(this.page);
    },
    async handleReject(id) {
      await approveReject({ id });
      await this.getTableData(this.page);
    },
    handleCheck(id,flag) {
      this.$refs.detail.init(id,flag);
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData(this.page)
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.getTableData(this.page)
    },
    handleReply(id,type) {
      this.$refs.reply.init(id,type);
    },
    handleSearch(){
      this.getTableData({...this.page,replyFlag: this.form.status ? this.form.status === '0' : ''})
    },
    handleReset(){
      this.form.status = ''
      this.getTableData({ pageNum: 1, pageSize: 10,replyFlag:'' })
    }
  },
};
</script>
